<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body ,ul{margin: 0; padding: 0;}
        ul{list-style:outside none none;     }
        #nav{
            width: 100%;
            height: 45px;
            background-color: #459df5;
        }
        #nav ul{
            margin: 0 auto;
            width: 1000px;
        }
        #nav li{
              display: inline-block;
              width: 120px;
              height: 45px;
              line-height: 45px;
              float: left;
         }
         #nav li a{
            text-decoration: none;
            color: white;
            display: block;
            text-align: center;
            font-size: 20px;
         }
          #nav li a:hover{
            background-color: #338ce6;
          }
         .active{
            background-color: #338ce6;
         }
        #wba{
            margin-right:3%;
        }
       .hide{
            display: none;
        }
        .menu .head{
            margin-left:10%;
            height:50px;
            background-color: #f2f3ff;
            line-height: 40px;
        }
    </style>
</head>
<body>
<div id="wba" align="right">
    <span><a href="{% url 'new_index' %}">首页</a></span>&nbsp;&nbsp;
        {% if request.user.is_authenticated  %}
        <span>Welcome.{{ request.user }}</span>&nbsp;&nbsp;
        <span><a href="{% url 'Personal_Center_index' %}">个人中心</a></span>&nbsp;&nbsp;
            <span><a href = "{% url 'loginout'  %}">退出登录</a></span>&nbsp;&nbsp;
        {% else %}
        <span><a href="{% url 'new_login' %}">请登录</a></span>&nbsp;&nbsp;
        {% endif %}
</div>
 <nav id="nav">
        <ul>
           <li><a href="{% url 'new_index' %}" class="active">个人中心</a></li>
{#           <li><a href="#" >安卓app</a></li>#}
{#           <li><a href="#" class="active">代理ip</a></li>#}
{#           <li><a href="#">用户</a></li>#}
{#           <li><a href="#">权威合作</a></li>#}
{#           <li><a href="#">手机百科</a></li>#}
        </ul>
      </nav>
{#<div style="height: 48px ;border: 1px solid red"></div>#}
<div style="width:150px ;border: 1px solid red ">
    <div class="menu">
           <div id='a1' class="head "  onclick="caidan('a1')">菜单1</div>
           <div class="conent">
                <div clas="item">内容1</div>
                <div clas="item">内容1</div>
                <div clas="item">内容1</div>
           </div>
    </div>
    <div class="menu">
           <div id='a2' class="head "   onclick="caidan('a2')">菜单2</div>
           <div class="conent hide">
                <div clas="item">内容2</div>
                <div clas="item">内容2</div>
                <div clas="item">内容2</div>
           </div>
    </div>

    <div class="menu">
           <div  id='a3' class="head"   onclick="caidan('a3')">菜单3</div>
           <div class="conent hide">
                <div clas="item">内容3</div>
                <div clas="item">内容3</div>
                <div clas="item">内容3</div>
           </div>
    </div>

    <div class="menu">
           <div id='a4' class="head"  onclick="caidan('a4')">菜单4</div>
           <div class="conent  hide">
                <div clas="item">内容4</div>
                <div clas="item">内容4</div>
                <div clas="item">内容4</div>
           </div>
    </div>

</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>

    function caidan(nod) {
        var head=document.getElementById(nod);
        curr_meu=head.parentElement.parentElement.children;
        for (var i=0; i<curr_meu.length; i++){
            var item_list=curr_meu[i];
            item_list.children[1].classList.add('hide');
        }
        head.nextElementSibling.classList.remove('hide')
    }
</script>
</body>
</html>